<script setup lang="ts">
interface PricingIconProps {
  type: 'basic' | 'professional' | 'enterprise'
  size?: number
}

const props = withDefaults(defineProps<PricingIconProps>(), {
  size: 64
})
</script>

<template>
  <!-- 基础版 - 单用户图标 -->
  <svg
    v-if="props.type === 'basic'"
    :width="props.size"
    :height="props.size"
    viewBox="0 0 120 120"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="pricing-icon"
  >
    <circle cx="60" cy="60" r="58" fill="url(#basicGradient)" opacity="0.1" />
    <!-- 用户头部 -->
    <circle cx="60" cy="45" r="18" fill="url(#basicGradient)" />
    <!-- 用户身体 -->
    <path
      d="M35 95C35 75 45 70 60 70C75 70 85 75 85 95V100H35V95Z"
      fill="url(#basicGradient)"
    />
    <defs>
      <linearGradient id="basicGradient" x1="0" y1="0" x2="120" y2="120">
        <stop offset="0%" stop-color="#4FACFE" />
        <stop offset="100%" stop-color="#00F2FE" />
      </linearGradient>
    </defs>
  </svg>

  <!-- 专业版 - 团队图标 -->
  <svg
    v-else-if="props.type === 'professional'"
    :width="props.size"
    :height="props.size"
    viewBox="0 0 120 120"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="pricing-icon"
  >
    <circle cx="60" cy="60" r="58" fill="url(#proGradient)" opacity="0.1" />
    <!-- 左侧用户 -->
    <circle cx="40" cy="50" r="12" fill="url(#proGradient)" opacity="0.7" />
    <path
      d="M22 85C22 72 28 68 40 68C52 68 58 72 58 85V88H22V85Z"
      fill="url(#proGradient)"
      opacity="0.7"
    />
    <!-- 中间用户(主要) -->
    <circle cx="60" cy="45" r="15" fill="url(#proGradient)" />
    <path
      d="M40 90C40 75 48 70 60 70C72 70 80 75 80 90V95H40V90Z"
      fill="url(#proGradient)"
    />
    <!-- 右侧用户 -->
    <circle cx="80" cy="50" r="12" fill="url(#proGradient)" opacity="0.7" />
    <path
      d="M62 85C62 72 68 68 80 68C92 68 98 72 98 85V88H62V85Z"
      fill="url(#proGradient)"
      opacity="0.7"
    />
    <defs>
      <linearGradient id="proGradient" x1="0" y1="0" x2="120" y2="120">
        <stop offset="0%" stop-color="#4FACFE" />
        <stop offset="100%" stop-color="#00F2FE" />
      </linearGradient>
    </defs>
  </svg>

  <!-- 企业版 - 企业大楼图标 -->
  <svg
    v-else-if="props.type === 'enterprise'"
    :width="props.size"
    :height="props.size"
    viewBox="0 0 120 120"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="pricing-icon"
  >
    <circle cx="60" cy="60" r="58" fill="url(#entGradient)" opacity="0.1" />
    <!-- 主楼 -->
    <rect x="35" y="30" width="50" height="70" rx="4" fill="url(#entGradient)" />
    <!-- 窗户 -->
    <rect x="42" y="40" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <rect x="56" y="40" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <rect x="70" y="40" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <rect x="42" y="54" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <rect x="56" y="54" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <rect x="70" y="54" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <rect x="42" y="68" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <rect x="56" y="68" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <rect x="70" y="68" width="8" height="8" rx="2" fill="white" opacity="0.9" />
    <!-- 大门 -->
    <rect x="50" y="85" width="20" height="15" rx="2" fill="white" opacity="0.9" />
    <!-- 旗杆 -->
    <rect x="58" y="15" width="4" height="15" fill="#FFD700" />
    <path d="M62 15L75 20L62 25V15Z" fill="#FFD700" />
    <defs>
      <linearGradient id="entGradient" x1="0" y1="0" x2="120" y2="120">
        <stop offset="0%" stop-color="#4FACFE" />
        <stop offset="100%" stop-color="#00F2FE" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.pricing-icon {
  transition: transform 0.3s ease;
}

.pricing-icon:hover {
  transform: scale(1.1);
}
</style>
